<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="实名认证"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div v-show="real == 0" class="verification">
      <div class="topword"><span>实名认证</span>（验证身份证正面）</div>
      <van-uploader
        upload-text="请上传身份证正面照片"
        accept="image/*"
        :max-count="1"
        v-model="fileList"
        :after-read="afterRead"
      />
      <div class="bword">(仅用于身份认证和产权查验)</div>
    </div>
    <div v-show="real == 0" class="hotword">
      <div>未实名注册将不能使用本平台在线租房功能</div>
      <div>身份信息须与不动产证权利人/实际承租人一致</div>
    </div>

    <div v-show="real == 1" class="real">
      <van-icon size="38px" color="#45b7cb" name="passed" />
      <div>已实名认证</div>
    </div>
  </div>
</template>

<script>
import { getToken } from "../../apis/house";
import local from "../../utils/local.js";
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { idcardUp, getUserInfo } from "../../apis/user.js";

const qiniu = require("qiniu-js");
export default {
  data() {
    return {
      fileList: [],
      token: "",
      real: "",
    };
  },
  created() {
    this.getqntoken();
    this.real = JSON.parse(local.get("userInfo")).realNameAuthStatus;
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    afterRead(file) {
      let _this = this;
      let fileurl = file.content;
      let name = file.file.name;
      let imgfile = dataURLtoFile(fileurl, name);
      console.log("file",file)
      console.log("imgfile",imgfile)
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          idcardUp({ idCardImage: res.key }).then((rep) => {
            if (rep.code == 2030 || rep.code == 2045) {
              _this.$toast(rep.msg);
            } else if (rep.code == 200) {
              _this.real = 1;
              let id = local.get("userId");
              getUserInfo({ userId: id }).then((res) => {
                local.set("userInfo", JSON.stringify(res.result));
                _this.$router.go(-1);
              });
            }
          });
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "idcard/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
  },
};
</script>

<style lang="less" scoped>
.verification {
  margin: 10px 15px;
  .topword {
    margin-bottom: 20px;
    font-size: 14px;
    color: #ccc;
    span {
      font-size: 16px;
      color: #333;
    }
  }
  /deep/.van-uploader {
    border-radius: 10px;
    width: 100%;
    height: 200px;
    .van-uploader__upload {
      border-radius: 10px;
      width: 100%;
      height: 200px;
      background-color: #eee;
      .van-icon {
        font-size: 50px;
        color: #fff;
      }
      .van-uploader__upload-text {
        font-size: 16px;
        color: #fff;
      }
    }
    .van-uploader__preview {
      border-radius: 10px;
      width: 100%;
      height: 200px;
      .van-uploader__preview-image {
        width: 100%;
        height: 200px;
      }
    }
  }
  .bword {
    text-align: center;
    font-size: 14px;
    color: #333;
    margin-top: 5px;
  }
}
.hotword {
  margin: 250px 15px 0;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.real {
  display: flex;
  flex-direction: column;
  padding: 40px 0 0;
  align-items: center;
  color: #45b7cb;

  > div {
    margin-top: 20px;
    font-size: 20px;
  }
}
</style>